<template>
	<view class="my-card">
		<view class="my-card-title">
			您还可以绑定{{10-userList.length}}张就诊卡/电子健康卡
		</view>
		<view class="my-card-list" v-for="(item, i) in userList" :key='i'>
			<HealthCard v-if='item.qrCodeText' :userInfo='item' :imgUrl='imgUrl' @onHealth='toPage'/>
			<view v-else class="base-card">
				<view class="base-card-title">
					<text>{{item.name}}</text>
					<text class="to-up" v-if="healthCardType==='1'">升级为电子健康卡</text>
				</view>
				<view class="base-card-card-no">
					{{item.cardNo}}
				</view>
				<view class="flexR base-card-btn">
					<view class="remove" @click="()=>{onCancle(item.patId)}">解绑</view>
					<view v-if="item.loginStatus==1">正在使用</view>
					<view v-else @click="()=>onDefault(item.patId)">设为默认</view>
					<!-- <view @click="()=>onEdit(item)">修改</view> -->
				</view>
				<text class="iconfont base-card-position" :class="item.sex==='女'?'icon-iconfontnvtouxiang':'icon-lianxirenxuanzhong'"></text>
			</view>
		</view>
		<view class="my-card-btn" v-if="userList.length<10">
			<!-- <view class="theme-light-btn" @click="rePage('/pages/Login/register')">注册{{healthCardType==='0'?'就诊卡':'电子健康卡'}}</view> -->
			<view class="wihte" @click="rePage('/pages/Login/addPatient')">绑定{{healthCardType==='0'?'就诊卡':'电子健康卡'}}</view>
		</view>
		<Load :load='load' />
	</view>
</template>

<script>
	import HealthCard from '@/components/HealthCard/index.vue'
	import { mapGetters, mapActions } from 'vuex'
	import Load from '@/components/Load/index.vue'
	export default {
		components:{ HealthCard, Load },
		data() {
			return {
				imgUrl:'../../../static/images/health-card/er_code.png',
				load:false
			}
		},
		computed:{
			...mapGetters(['healthCardType','userList','hostApi'])
		},
		methods: {
			...mapActions(['changeUser', 'userLogout', 'userDetail']),
			toPage(val){
				let res = JSON.stringify(val)
				uni.navigateTo({
					url:'/pages/Personal/MyCard/healthCard?params=' + res
				})
			},
			onDefault(val){
				if(val){
					this.load = true
					this.changeUser(val).then(()=> {
						this.load = false
						this.$u.toast('切换成功');
					}).catch(e => this.load = false)
				}
			},
			onCancle(val){
				if(val){
					this.load = true
          // deletePatient
					this.userLogout(val).then(()=> {
						this.load = false
						this.$u.toast('解绑成功');
					}).catch(e => this.load = false)
				}
			},
			onEdit(item){
				this.load = true
				this.userDetail(item.patId).then((data)=> {
					this.load = false
					let res = JSON.stringify(data||'')
					uni.navigateTo({
						url:'/pages/Login/index?editInfo=' + res
					})
				}).catch(e => this.load = false)
			},
			rePage(url){
				if(url==='/pages/Login/index'){
					if(this.healthCardType==='1'){
						// #ifdef H5
						window.location.replace(
							`https://health.tengmed.com/open/getHealthCardList?redirect_uri=${encodeURIComponent(this.hostApi + "/bindecard")}`
					    )
					    // #endif
						// #ifndef H5
						uni.navigateTo({
							url
						})
						// #endif
					}else{
						uni.navigateTo({
							url
						})
					}
				}else{
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-card{
		&-title{
			background-color: #fcebde;
			min-height: 80rpx;
			display: flex;justify-content: center;
			align-items: center;
			color: $orage-color;
			margin-bottom: 30rpx;
		}
		&-list{
			padding: 0 20rpx;
			margin-bottom: 20rpx;
		}
		.base-card{
			border-radius: 10rpx;
			background-image: url(http://scwinning.com.cn/base-bg.jpg);
			background-size: 100% 100%;
			position: relative;
			padding-top: 30rpx;
			padding-bottom: 10rpx;
			&-title{
				margin-left: 50rpx;
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
				.to-up{
					margin-left: 20rpx;
					font-size: 26rpx;
					color: $theme-color;
					text-decoration: underline;
				}
			}
			&-card-no{
				margin-left: 50rpx;
				font-size:32rpx ;
				font-weight: bold;
				margin-bottom: 10rpx;
			}
			&-btn{
				>view{
					flex: 1;
					height: 70rpx;
					line-height: 50rpx;
					border-radius: 10rpx;
					padding: 10rpx 30rpx;
					color: #fFF;
					background-color: $theme-color-light;
					margin: 20rpx;
					text-align: center;
					// max-width: 35%;
				}
				>.remove{
					background-color: #fab6b6;
				}
			}
			&-position{
				position: absolute;
				top: 10rpx;
				right: 50rpx;
				font-size: 100rpx;
			}
		}
		&-btn{
			padding: 20rpx;
			>view{
				height: 90rpx;
				margin-top: 20rpx;
			}
			>.wihte{
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid $theme-color-light;
				color: $theme-color-light;
				font-size: 34rpx;
				border-radius:12rpx;
			}
		}
	}
</style>
